<template>
    <div class="default-main">
        <el-form
            v-if="!state.loading"
            ref="formRef"
            @submit.prevent=""
            @keyup.enter="onSubmit()"
            :model="state.form"
            :rules="state.rules"
            :label-position="'top'"
            :key="state.formKey"
        >
            <el-row v-loading="state.loading" :gutter="20">
                <el-col class="xs-mb-20" :xs="8" :md="8" :lg="8" :xl="8" v-for="(item, index) in state.config" :key="index">
                    <div class="config-form-item">
                        <FormItem
                            :label="item.title"
                            :type="item.type"
                            v-model="state.form[item.name]"
                            :attr="{ prop: item.name, ...item.extend }"
                            :input-attr="{ ...item.input_extend }"
                            :tip="item.tips"
                        />
                    </div>
                </el-col>
            </el-row>
            <div class="config-form-item">
                <el-button type="primary" @click="onSubmit()">{{ t('Save') }}</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { ElMessageBox, ElNotification } from 'element-plus'
import { isEmpty } from 'lodash-es'
import { onActivated, onDeactivated, onMounted, onUnmounted, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import createAxios from '/@/utils/axios'
import FormItem from '/@/components/formItem/index.vue'
import { uuid } from '/@/utils/random'
import { buildValidatorData, type buildValidatorParams } from '/@/utils/validate'
import { closeHotUpdate, openHotUpdate } from '/@/utils/vite'

defineOptions({
    name: '/admin/device.Config/index',
})

const { t } = useI18n()


const formRef = ref<FormInstance>()

const state: {
    loading: boolean
    form: anyObj
    rules: anyObj
    config: anyObj
    formKey: string
} = reactive({
    loading: true,
    form: {},
    rules: {},
    config: {},
    formKey: uuid(),
})

const getIndex = () => {
    createAxios({
        url: '/admin/device.Config/index',
        method: 'get',
    }).then((res) => {
            let config = res.data.list
            state.loading = false
            let formNames: anyObj = {}
            let rules: anyObj = {}

            for (const key in config) {
                if (config[key].content) {
                    config[key].input_extend = Object.assign({}, { content: JSON.parse(config[key].content) })

                }
                if (config[key].rule) {
                    let ruleStr = config[key].rule.split(',')
                    let ruleArr: anyObj = []
                    ruleStr.forEach((item: string) => {
                        ruleArr.push(buildValidatorData({ name: item as buildValidatorParams['name'], title: config[key].title }))
                    })
                    rules = Object.assign(rules, {
                        [config[key].name]: ruleArr,
                    })
                }
                formNames[config[key].name] = config[key].type == 'number' ? parseFloat(config[key].value) : config[key].value
            }
            console.log(config);
            state.config = config
            state.form = formNames
            state.rules = rules
            state.formKey = uuid()
        })
        .catch(() => {
            state.loading = false
        })
}

const onSubmit = () => {
    if (!formRef.value) return
    formRef.value.validate((valid) => {
        if (valid) {
            // 只提交当前tab的表单数据
            const formData: anyObj = {}
            for (const key in state.config) {
                formData[state.config[key].name] = state.form[state.config[key].name] ?? ''
            }
            formData.id = 1
            createAxios({
                url: '/admin/device.Config/edit',
                method: 'post',
                data: formData
            }).then((rlt) => {
                if (rlt.code == 1) {
                     ElNotification({
                        type: 'success',
                        message: '修改成功',
                    })
                }
            })
        }
    })
}

onMounted(() => {
    getIndex()
    closeHotUpdate('config')
})
onActivated(() => {
    closeHotUpdate('config')
})
onDeactivated(() => {
    openHotUpdate('config')
})
onUnmounted(() => {
    openHotUpdate('config')
})
</script>

<style scoped lang="scss">
.send-test-mail {
    padding-bottom: 20px;
}
.el-tabs--border-card {
    border: none;
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-border-radius-base);
}
.el-tabs--border-card :deep(.el-tabs__header) {
    background-color: var(--ba-bg-color);
    border-bottom: none;
    border-top-left-radius: var(--el-border-radius-base);
    border-top-right-radius: var(--el-border-radius-base);
}
.el-tabs--border-card :deep(.el-tabs__item.is-active) {
    border: 1px solid transparent;
}
.el-tabs--border-card :deep(.el-tabs__nav-wrap) {
    border-top-left-radius: var(--el-border-radius-base);
    border-top-right-radius: var(--el-border-radius-base);
}
.el-card :deep(.el-card__header) {
    height: 40px;
    padding: 0;
    line-height: 40px;
    border: none;
    padding-left: 20px;
    background-color: var(--ba-bg-color);
}
.config-tab-pane {
    padding: 5px;
}
.config-tab-pane-add {
    width: 80%;
}
.config-form-item {
    display: flex;
    align-items: center;
    .el-form-item {
        flex: 13;
    }
    .config-form-item-name {
        opacity: 0;
        flex: 3;
        font-size: 13px;
        color: var(--el-text-color-disabled);
        padding-left: 20px;
    }
    .del-config-form-item {
        cursor: pointer;
        flex: 1;
        padding-left: 10px;
    }
    .close-icon {
        display: none;
    }
    &:hover {
        .config-form-item-name {
            opacity: 1;
        }
        .close-icon {
            display: block;
            color: var(--el-text-color-disabled) !important;
        }
    }
}
.config_quick_entrance {
    margin-left: 10px;
    margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
    .xs-mb-20 {
        margin-bottom: 20px;
    }
}
</style>
